<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta
        http-equiv="Content-Type"
        content="text/html; charset=utf-8"
    />
    <title>粒子喷泉-控制开关</title>

    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>

    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <!-- 允许您将模型导入到场景中 -->
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <!-- 允许您使用触摸屏 -->
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    <!-- earcut算法 -->
    <script src="../../src/earcut.js"></script>
</head>

<body>
    <canvas
        id="renderCanvas"
        touch-action="none"
    ></canvas>
    <!-- 注意browseatouch-action="none"以获得PEPr/canvas调整大小事件的最佳效果 -->


    <script>
        const canvas = document.getElementById("renderCanvas"); //获取canvas元素
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        //在这里添加与playground格式匹配的代码
        const createScene = function () {
            const scene = new BABYLON.Scene(engine);//使用引擎
            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 50, new BABYLON.Vector3(0, 15, -5));//设置摄像机
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0));//设置灯光

            //喷泉开关
            let switched = false;//最开始关闭
            const pointerDown = (mesh) => {
                if (mesh === fountain) {
                    switched = !switched;
                    if (switched) {
                        // Start the particle system
                        particleSystem.start();
                    }
                    else {
                        // Stop the particle system
                        particleSystem.stop();
                    }
                }

            }
            //监测scene变化
            scene.onPointerObservable.add((pointerInfo) => {
                // console.log("pointerInfo:", pointerInfo);
                switch (pointerInfo.type) {
                    case BABYLON.PointerEventTypes.POINTERDOWN:
                        if (pointerInfo.pickInfo.hit) {
                            pointerDown(pointerInfo.pickInfo.pickedMesh)
                        }
                        break;
                }
            });

            //喷泉剖面
            const fountainProfile = [
                new BABYLON.Vector3(0, 0, 0),
                new BABYLON.Vector3(10, 0, 0),
                new BABYLON.Vector3(10, 4, 0),
                new BABYLON.Vector3(8, 4, 0),
                new BABYLON.Vector3(8, 1, 0),
                new BABYLON.Vector3(1, 2, 0),
                new BABYLON.Vector3(1, 15, 0),
                new BABYLON.Vector3(3, 17, 0)
            ];
            //创建喷泉
            const fountain = BABYLON.MeshBuilder.CreateLathe(
                "fountain",
                {
                    shape: fountainProfile,
                    sideOrientation: BABYLON.Mesh.DOUBLESIDE
                },
                scene
            );


            // 创建粒子系统
            var particleSystem = new BABYLON.ParticleSystem(
                "particles",
                5000,//同时存活粒子的最大数量
                scene
            );

            //每个粒子的材质
            particleSystem.particleTexture = new BABYLON.Texture("../../src/imgs/flare.png", scene);

            //基本发射器区域是围绕指定点的给定尺寸的框
            particleSystem.emitter = new BABYLON.Vector3(0, 16, 0); //起始对象，发射器
            particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); //箱体最小尺寸
            particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); //箱体最大尺寸

            //每个粒子的颜色
            particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
            particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
            particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);
            // 粒子颜色的混合模式Blend mode : BLENDMODE_ONEONE, or BLENDMODE_STANDARD
            particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;

            //每个粒子的尺寸（随机在最大值和最小值之间）
            particleSystem.minSize = 0.1;
            particleSystem.maxSize = 0.5;
            //每个粒子的寿命（随机在最大值和最小值之间）
            particleSystem.minLifeTime = 2;
            particleSystem.maxLifeTime = 3.5;

            // 每秒发射的粒子数
            particleSystem.emitRate = 1500;


            // 设置每个粒子的重力
            particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);

            // 每个粒子发射后的方向，有两个方向
            particleSystem.direction1 = new BABYLON.Vector3(-2, 8, 2);
            particleSystem.direction2 = new BABYLON.Vector3(2, 8, -2);
            // 粒子速度，最大值最小值以及更新速率
            particleSystem.minEmitPower = 1;
            particleSystem.maxEmitPower = 3;
            particleSystem.updateSpeed = 0.025;


            //角速度，以弧度为单位
            particleSystem.minAngularSpeed = 0;
            particleSystem.maxAngularSpeed = Math.PI;


            return scene;

        }
        const scene = createScene(); //调用createScene函数

        //注册一个渲染循环来重复渲染场景
        engine.runRenderLoop(function () {
            scene.render();
        });

        // 注意浏览器、画布大小调整事件
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</html>